<template>
  <div id="featuresSetting" class="m-content-box">
    <div class="m-set-order-box">
      <p class="title">排课设置</p>
      <div class="features-setting">
        <div class="features-setting__item">
          <span class="features-setting__item-label">
            <span class="classroom-check__label">教室冲突验证：</span>
            开启后，系统会对教室进行冲突验证，默认每个教室同一时间只能排一节课
          </span>
          <div class="features-setting__item-lock">
            <span class="lock-status curp">

              <el-switch v-model="classroom_conflict" />
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="m-set-order-box">
      <p class="title">课表查看设置</p>
      <div class="syllabus-browse">
        <div class="syllabus-browse__label">课表查看权限：</div>
        <div class="syllabus-browse__role">
          <el-checkbox-group v-model="view_schedule">
            <el-checkbox label="1">会员</el-checkbox>
            <el-checkbox label="2">访客</el-checkbox>
            <el-checkbox label="3">未登录游客</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="m-set-order-box">
      <p class="title">课程类型名称设置（提示：当前自定义名称只更改约课页面的展示文案，其他地方暂不同步）</p>
      <div class="course-type-alias-setting">
        <div data-index="0" class="course-type-alias__item">
          <div class="course-type-alias__item-row">团课</div>
          <div class="course-type-alias__item-row">
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型名称：</span>{{ group_class_name }}
            </div>
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型排序：</span>{{ group_class_name_index }}
            </div>
            <div data-index="0" class="course-type-alias__btn" @click="open(1,group_class_name)">
              <img src="../../../public/img/bianji.png" style="width: 20px;height: 20px;display: inline-block; vertical-align: middle;">
              编辑
            </div>
          </div>
        </div>
        <div data-index="1" class="course-type-alias__item">
          <div class="course-type-alias__item-row">精品课</div>
          <div class="course-type-alias__item-row">
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型名称：</span>{{ classic_course_name }}
            </div>
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型排序：</span>{{ classic_course_name_index }}
            </div>
            <div data-index="1" class="course-type-alias__btn" @click="open(2,classic_course_name)">
              <img src="../../../public/img/bianji.png" style="width: 20px;height: 20px;display: inline-block; vertical-align: middle;">
              编辑
            </div>
          </div>
        </div>
        <div data-index="2" class="course-type-alias__item">
          <div class="course-type-alias__item-row">私教课</div>
          <div class="course-type-alias__item-row">
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型名称：</span>{{ private_classes_name }}
            </div>
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型排序：</span>{{ private_classes_name_index }}
            </div>
            <div data-index="2" class="course-type-alias__btn" @click="open(3,private_classes_name)">
              <img src="../../../public/img/bianji.png" style="width: 20px;height: 20px;display: inline-block; vertical-align: middle;">
              编辑
            </div>
          </div>
        </div>
        <div data-index="2" class="course-type-alias__item">
          <div class="course-type-alias__item-row">班课</div>
          <div class="course-type-alias__item-row">
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型名称：</span>{{ class_lessons_name }}
            </div>
            <div class="course-type-alias__item-row-title">
              <span class="course-type-alias__label">当前类型排序：</span>{{ class_lessons_name_index }}
            </div>
            <div data-index="2" class="course-type-alias__btn" @click="open(4,class_lessons_name)">
              <img src="../../../public/img/bianji.png" style="width: 20px;height: 20px;display: inline-block; vertical-align: middle;">
              编辑
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-set-order-box">
      <p class="title">开卡时间默认方式设置</p>
      <div class="syllabus-browse">
        <div class="syllabus-browse__label">开卡默认方式：</div>
        <div class="syllabus-browse__role">

          <el-radio v-model="open_card" label="1">立即开卡</el-radio>
          <el-radio v-model="open_card" label="2">第一次预约开卡</el-radio>
          <el-radio v-model="open_card" label="3">特定时间开卡</el-radio>
        </div>
      </div>
    </div>
    <div class="m-set-order-box">
      <p class="title">电子合同设置</p>
      <div class="features-setting">
        <div class="features-setting__item">
          <span class="features-setting__item-label">
            <span class="classroom-check__label">电子合同签署提醒：</span>开启后，系统发卡、转卡、续卡、卡升级、报班、续班、转班弹窗提醒签署电子合同（仅场馆端）
          </span>
          <div class="features-setting__item-lock">
            <span class="lock-status curp">
              <el-switch v-model="contract_remind" />
            </span>
          </div>
        </div>
      </div>
    </div>

    <el-button type="primary" @click="tijiao()">保存</el-button>
    <!-- 弹出层 -->
    <div v-if="is_show" id="commonBg" class="m-dialog-bg" />
    <div v-if="is_show" id="dialogBox" class="m-dialog-box fade-in" style="width: 460px; top: 340px; margin-left: -230px;"><div class="dialog-content">
      <div class="dialog-content-header">
        <span class="dialog-title">修改名称</span>
        <span class="dialog-close js-dialog_close" @click="close" />
      </div>
      <div class="dialog-content-main">
        <div class="dialog-main-field flex-edit-box mt-10">
          <div class="dialog-field field-box">
            <div class="item clear dis disJuB">
              <label class="fl label"><span style="color:red;">*</span> 当前名称</label>
              <el-input v-if="type_id===1" v-model="group_class_name" type="text" style="width: 122px" placeholder="课程类型名称" />
              <el-input v-if="type_id===2" v-model="classic_course_name" type="text" style="width: 122px" placeholder="课程类型名称" />
              <el-input v-if="type_id===3" v-model="private_classes_name" type="text" style="width: 122px" placeholder="课程类型名称" />
              <el-input v-if="type_id===4" v-model="class_lessons_name" type="text" style="width: 122px" placeholder="课程类型名称" />
            </div>
            <div class="item clear dis disJuB">
              <label class="fl label"><span style="color:red;">*</span> 当前排序</label>
              <el-input v-if="type_id===1" v-model="group_class_name_index" type="text" style="width: 122px" placeholder="课程类型排序" />
              <el-input v-if="type_id===2" v-model="classic_course_name_index" type="text" style="width: 122px" placeholder="课程类型排序" />
              <el-input v-if="type_id===3" v-model="private_classes_name_index" type="text" style="width: 122px" placeholder="课程类型排序" />
              <el-input v-if="type_id===4" v-model="class_lessons_name_index" type="text" style="width: 122px" placeholder="课程类型排序" />
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-content-footer">
        <el-button type="primary" @click="baocun()">保存</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </div>
    </div>
    <!-- 弹出层 -->
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { featuresSetting, GeneralEdit, courseType } from '@/api/system.js'
import { mapGetters } from 'vuex'
import { memberAnalysis } from '@/api/information' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      is_show: false,
      type_id: 1,
      classroom_conflict: 1,
      view_schedule: '',
      group_class_name: '团课',
      classic_course_name: '精品课',
      private_classes_name: '私教课',
      class_lessons_name: '班课',
      group_class_name_index: 0,
      classic_course_name_index: 0,
      private_classes_name_index: 0,
      class_lessons_name_index: 0,
      open_card: '1',
      contract_remind: 1
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '功能设置',
      url: '/system/featuresSetting',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })

    this.getList()
    this.courseTypeList()
  },
  methods: {
    courseTypeList() {
      this.listLoading = true
      courseType().then(response => {
        const {
          data
        } = response
        console.log(data)

        this.group_class_name = data[0].name
        this.classic_course_name = data[1].name
        this.private_classes_name = data[2].name
        this.class_lessons_name = data[3].name
        this.group_class_name_index = data[0].sort
        this.classic_course_name_index = data[1].sort
        this.private_classes_name_index = data[2].sort
        this.class_lessons_name_index = data[3].sort

        this.listLoading = false
      })
      this.listLoading = false
    },
    getList() {
      this.listLoading = true
      featuresSetting().then(response => {
        const {
          data
        } = response
        this.classroom_conflict = data.classroom_conflict === 2
        this.view_schedule = data.view_schedule.split(',')
        this.open_card = data.open_card.toString()
        this.contract_remind = data.contract_remind === 2
        this.listLoading = false
      })
      this.listLoading = false
    },
    open(id, type) {
      this.is_show = true
      this.type_id = id
      if (id === 1) {
        this.group_class_name = type
      }
      if (id === 2) {
        this.classic_course_name = type
      }
      if (id === 3) {
        this.private_classes_name = type
      }
    },
    close() {
      this.is_show = false
    },
    baocun() {
      this.is_show = false
    },
    tijiao() {
      var data = {
        classroom_conflict: this.classroom_conflict === true ? 2 : 1,
        view_schedule: this.view_schedule.join(','),
        group_class_name: this.group_class_name,
        classic_course_name: this.classic_course_name,
        private_classes_name: this.private_classes_name,
        class_lessons_name: this.class_lessons_name,
        open_card: this.open_card,
        contract_remind: this.contract_remind === true ? 2 : 1,
        group_class_name_index: this.group_class_name_index,
        classic_course_name_index: this.classic_course_name_index,
        private_classes_name_index: this.private_classes_name_index,
        class_lessons_name_index: this.class_lessons_name_index
      }
      GeneralEdit(data).then(response => {
        const {
          data
        } = response

        this.$message({
          message: '成功',
          type: 'success'
        })
        this.getList()
      })
    }
  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size: 14px;
}
.m-set-order-box {
  position: relative;
  margin-bottom: 30px;
}
.m-set-order-box .title {
  position: relative;
  color: #787878;
  font-size: 12px;
  height: 22px;
}
.features-setting__item:nth-child(odd) {
  background: #f2f2f2;
}
.features-setting__item {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  height: 40px;
}
.features-setting__item-label {
  flex: 1;
}
.classroom-check__label {
  display: inline-block;
  width: 165px;
}
.curp {
  cursor: pointer;
}
.syllabus-browse {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  background: #f2f2f2;
  min-height: 40px;

}
.syllabus-browse__label {
  width: 165px;
}
.course-type-alias__item {
  margin-bottom: 20px;
}
.course-type-alias__item-row {
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-bottom: 1px;
  padding-left: 15px;
  background: #f2f2f2;
}
.course-type-alias__item-row-title {
  width: 300px;
}
.course-type-alias__label {
  display: inline-block;
  width: 165px;
}
.course-type-alias__btn {
  margin-right: 240px;
  margin-left: auto;
  cursor: pointer;
}
p{
  margin: 0;
  padding: 0;
}
.m-dialog-bg {
  position: fixed;
  z-index: 1000;
  background: rgba(0, 0, 0, .4);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.fade-in {
  opacity: 1;
}

.m-dialog-box {
  position: absolute;
  width: 962px;
  left: 50%;
  top: 50%;
  margin-left: -480px;
  z-index: 1200;
  transition: all .2s ease-in-out;
}
.dialog-content {
  background: #ffffff;
  border-radius: 10px;
}
.dialog-content .dialog-content-header {
  position: relative;
  padding: 30px 0 10px;
  font-size: 20px;
  line-height: 20px;
  border-bottom: 1px solid #d9d9d9;
  margin: 0 60px;
  font-weight: 700;
}
.dialog-content .dialog-content-main {
  padding: 20px 60px;
}
.dialog-content .dialog-content-footer {
  padding: 20px 30px 40px;
  text-align: center;
}
.dialog-content .dialog-content-header .dialog-close {
  position: absolute;
  right: 0;
  top: 28px;
  width: 24px;
  height: 24px;
  background: url(../../../public/img/close.svg) no-repeat 0 0;
  background-size: 24px 24px;
  cursor: pointer;
}
.flex-edit-box {
  position: relative;
}

.mt-10 {
  margin-top: 10px;
}
.flex-edit-box .field-box:last-child {
  margin-bottom: 0;
}

.flex-edit-box .field-box {
  margin-bottom: 8px;
  background: #f2f2f2;
  min-height: 42px;
  line-height: 32px;
}
.flex-edit-box .field-box .item {
  padding: 5px 15px;
}

.clear {
  zoom: 1;
}
.fl {
  float: left;
}
</style>
